'use strict'
import React from 'react'
import style from './css.css'
import styles from '../component/css.css'
import queryString from 'query-string'
import { Base64 } from 'js-base64'

const urlData = queryString.parse(location.search)

// urlData = {
//   name: '默默',
//   num: 15,
//   page: 2
// }

const { inapp_info } = serverData
const { name, num, page } = urlData
const names = encodeURI(name)
let { title, digest } = serverData.list[num - 1]
title = title.replace('裘千尺', name)
digest = digest.replace('裘千尺', name)
const str = randomString(20)
const shareUrl = `https://m2.qiushibaike.com/myfoolday?name=${names}&num=${num}&page=1&share=app&str=${str}`
const shareUrlWeb = `https://m2.qiushibaike.com/myfoolday?name=${names}&num=${num}&page=1&share=web&str=${str}`
const imageUrl = `https://m2.qiushibaike.com/static/src/image/${num}.jpg`

function randomString (len) {
  len = len || 32
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length
  var pwd = ''
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isGuide: false
    }
    this.giveFriend = this.giveFriend.bind(this)
    this._mePlay = this._mePlay.bind(this)
    this._renderGuide = this._renderGuide.bind(this)
    this._closeGuide = this._closeGuide.bind(this)
  }

  componentDidMount () {
    this._getWxConfig()
  }

  _getWxConfig () {
    let url = window.location.href
    url = Base64.encode(url)
    const fetchURL = `https://api.qiushibaike.com/js_config?url=${url}`
    fetch(fetchURL, { method: 'get' })
      .then(res => res.json())
      .then(res => {
        console.log(res)
        const { appId, nonceStr, signature, timestamp } = res.config
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名
          jsApiList: [
            'onMenuShareAppMessage', // 分享给朋友
            'onMenuShareQQ', // 分享到QQ
            'onMenuShareTimeline', // 分享到朋友圈
            'onMenuShareQZone' // 分享到QQ空间
          ] // 必填，需要使用的JS接口列表
        })

        wx.ready(() => {
          console.log('star')

          wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: digest, // 分享描述
            link: shareUrlWeb,
            imgUrl: imageUrl,
            success: function () {
              console.log('分享成功')
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              console.log('分享取消')
              // 用户取消分享后执行的回调函数
            }
          })

          wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: digest, // 分享描述
            link: shareUrlWeb,
            imgUrl: imageUrl,
            success: function () {
              console.log('分享成功')

              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              console.log('分享取消')
              // 用户取消分享后执行的回调函数
            }
          })

          wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: shareUrlWeb,
            imgUrl: imageUrl,
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })

          wx.onMenuShareQZone({
            title: title, // 分享标题
            desc: digest, // 分享描述
            link: shareUrlWeb,
            imgUrl: imageUrl,
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })

        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          alert('err')
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  giveFriend () {
    if (inapp_info) {
      const u = navigator.userAgent
      let isApp
      if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { // 安卓
        isApp = 0
      }
      else {
        isApp = 2
      }
      prompt('__native_call=>' + JSON.stringify({
        method: 'reqNative',
        modul: 'share',
        action: 'shareInterior',
        callbackId: 'callback',
        args: {
          'share_tpye': isApp, // 客户端设置出错 a 全部分享为0 ios 为2
          'title': title,
          'content': digest,
          'url': shareUrl,
          'imageUrl': imageUrl
        }
      }))
    }
    else {
      this.setState({ isGuide: true })
    }
  }
  _goQsapp () {
    window.location.href = 'https://www.qiushibaike.com/download?from=act'
  }

  _mePlay () {
    window.location.href = 'https://m2.qiushibaike.com/foolday'
  }
  _isPlay () {
    if (page == 1) {
      return (
        <div className={style.isPlay}>
          <div className={style.playText}>愚人节快乐~<br />你的小伙伴强行和你进行了玩耍</div>
          <div className={styles.playBtn} onClick={this._mePlay}>我也要玩&nbsp;!</div>
        </div>
      )
    }
    else if (page == 2) {
      return (
        <div className={style.isPlay}>
          <div className={style.givePeo}>
            <div className={style.qbIcon}></div>
            <div className={styles.playBtn} onClick={this.giveFriend}>发给小伙伴</div>
          </div>
        </div>
      )
    }
  }
  _closeGuide () {
    this.setState({ isGuide: false })
  }
  _renderGuide () {
    if (this.state.isGuide) {
      return (
        <div className={style.guide} onClick={this._closeGuide}>
          <div className={style.guideIcon}></div>
        </div>
      )
    }
  }

  _renderGoapp () {
    if (inapp_info == 0) {
      return <div className={style.seeMore} onClick={this._goQsapp}></div>
    }
  }

  render () {
    const list = serverData.list[num - 1]
    list.title = list.title.replace('裘千尺', `<i>${name}</i>`)
    list.content = list.content.replace(new RegExp('裘千尺', 'gm'), `<i>${name}</i>`)
    return (
      <div className={style.all}>
        <div className={style.box}>
          <div className={styles.listWrap}>
            <div className={styles.listNo}>{num}</div>
            <div className={styles.listNo1}></div>
            <div className={style.listInfo}>
              <div className={style.listTop}>
                <div className={style.listHead} style={{
                  background: `url(${imageUrl}) no-repeat center`,
                  backgroundSize: 'cover'
                }}></div>
                <div className={style.listText} dangerouslySetInnerHTML={{ __html: list.title }}></div>
              </div>
              <div className={style.listContent} dangerouslySetInnerHTML={{ __html: list.content }}></div>
              <div className={style.qbFriend}>
                糗友<span>({list.name})</span>提供
              </div>
            </div>
            {this._isPlay()}
          </div>
        </div>
        {this._renderGoapp()}
        {this._renderGuide()}
      </div>
    )
  }
}

export default App
